<template>
  <div class="contents">
		<div class="growhead" color="#000">
			<van-nav-bar
			title="商品详情"
			left-text="返回"
			left-arrow
			@click-left="onClickLeft"
			/>
		</div>
        <div class="banner">
            <img src="./../assets/img/userimg1.jpg" alt="">
        </div>
        <div>
            <ul class="morebanner" >
                <li><img class="everyimg" src="./../assets/img/userimg1.jpg" alt=""></li>
                <li><img class="everyimg" src="./../assets/img/userimg1.jpg" alt=""></li>
                <li><img class="everyimg" src="./../assets/img/userimg1.jpg" alt=""></li>
            </ul>
        </div>
        <div class="price">
            <div class="h5span">
                <h5>￥8859</h5>
                <span class="discount">￥8859</span>
            </div>
            <div class="jiacar">          
                <p class="js">全棉四件套，1.5/1.8新消息费多少规划发生过和我国世纪</p>
                <router-link class="pullcar" to="/cart" tag="span">加入购物车</router-link>
                <router-link class="pullcar" to="/immediate" tag="span">立即购买</router-link>	
            </div> 
        </div>
        <div class="number">
            <p>规格数量选择</p>
            <p>配送地址</p>
        </div>
        <aside class="mail">
            1.支持30天无忧退货 <br/>
            2.48小时快速退货 <br/>
            3.满88元包邮
        </aside>
        <span class="plnumber">评论(18)</span>
					<ul class="Grassreview">
						<li>
							<aside class="everyreview">
								<img class="reviewimg" src="./../assets/img/userimg1.jpg">
								<div class="reviewright">
									<h6>小红花</h6>
									<p>真好看</p>
									<span>32分钟前</span>
								</div>
								<a href="#">赞</a>
							</aside>
						</li>
						<li>
							<aside class="everyreview">
								<img class="reviewimg" src="./../assets/img/userimg1.jpg">
								<div class="reviewright">
									<h6>小红花</h6>
									<p>真好看</p>
									<span>32分钟前</span>
								</div>
								<a href="#">赞</a>
							</aside>
						</li>
						<li>
							<aside class="everyreview">
								<img class="reviewimg" src="./../assets/img/userimg1.jpg">
								<div class="reviewright">
									<h6>小红花</h6>
									<p>真好看</p>
									<span>32分钟前</span>
								</div>
								<a href="#">赞</a>
							</aside>
						</li>
					</ul>
					<aside class="loadmore">
						查看全部评论
						<span class="iconfont icon-gengduo"></span>
					</aside>
  </div>
</template>

<script>
import Vue from 'vue'
import Header from './Header'
import { NavBar } from 'vant';

Vue.use(NavBar);
export default {
	data () {
		return {}
	},
	methods: {
	  onClickLeft () {
		this.$router.go(-1);
	  }
	},
	components: {
		Header
	}
}

</script>

<style lang="scss" scoped="scoped">
    .banner{
        height:2.4rem;
        img{
            width:100%;
            height:100%;
            display: block;
        }
    }
    .morebanner{
        height:0.8rem;
        box-sizing: content-box;
        display: flex;
        margin-top: 0.1rem;
        padding-left:0.2rem;
        padding-bottom: 0.2rem;
        border-bottom: 1px solid #ccc;
        li{
            flex: 1;
            .everyimg{
                width:0.8rem;
                height:0.8rem;
            }
        }   
    }
    .price{
        margin:0 0.2rem;
        height:2rem;
        color:#101010;
        h5{
            display: inline;
            font-size: 0.16rem;
            font-weight: normal;
        }
        .discount{
            text-decoration:line-through;
            font-size: 0.12rem;
            display: inline;
        }
        .jiacar{
            margin-top:0.14rem;
             .js{
                font-size:0.12rem;
            }
            .pullcar{
                width:100%;
                height:0.4rem;
                margin-top:0.1rem;
                font-size: 0.14rem;
								color: #fff;
                text-align: center;
                line-height:0.4rem;
								background: #696f80;
                display: block;
            }
        }
        .jiacar:after{
            content:'.';
            clear:both;
            display: block;
            height:0;
            overflow: hidden;
            visibility: hidden;
        }      
    }
    .number{
         width:100%;
        p{
            color:#000;
            text-indent: 0.12rem;
            padding:0.16rem 0;
            border-bottom: 1px solid #ccc;
        }
    }
    .mail{
        margin-left:0.12rem;
        line-height: 0.3rem;
        font-size: 0.12rem;
        color:#000;
    }
    	.plnumber{
			margin:0;
            margin-left:0.12rem;
		}
		.everyreview{
            margin: 0 0.12rem;
			color:#6C6C6C;
			height:0.52rem;
			display: flex;
			margin-top:0.12rem;
			.reviewimg{
				height:0.52rem;
				width:0.52rem;
				border-radius: 50%;
			}
			.reviewright{
				margin-left:0.1rem;
				h6{
					font-weight: normal;
					font-size: 0.14rem;
					line-height: 0.18rem;
				}
				p{
					font-size: 0.12rem;
					line-height: 0.18rem;
				}
				span{
					color:#6C6C6C;
					margin:0;
					padding:0;
					line-height: 0.18rem;
				}
			}
			a{
				flex:1;
				text-align: right;
				line-height: 0.9rem;
				color:#000;
			}
		}
		.loadmore{
            margin-top:0.1rem;
			width:100%;
			text-align: center;
		}
</style>

